<template>
    <div class="keyList" v-loading="loading">
        <div class="keys">
            <ul v-if="keyList.length>0" class="list">
               <li v-for="(item,index) in keyList" :key="index" :class="{'lastClickIndex':lastClickIndex===item}" @click="keyClick(item)">{{item}}</li>
            </ul>
            <div v-else-if="keyList.length==0 && !loading" class="noData">{{$t('aside.noData')}}</div>
        </div>
        <div v-if="keyList.length>0" class="loadMore">
            <el-button v-if="!loadDoNone" @click="loadMore">{{$t('aside.loadMore')}}</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            keyList:[],
            options:{
                match: "*",
                count: 200
            },
            stream:null,
            loadDoNone:false,
            PausePoint:0,
            lastClickIndex:undefined,
            loading:false
        }
    },
    props:["redisClient","config"],
    created(){
        this.$eventBus.$on("refushKeyList",(data)=>{
            if(data.client!==this.redisClient){
                return false;
            }
            data.type==="del"?this.deleteKey(data.key):this.addKey(data.key)
        })
        //2020年5月12日20:32:54
        this.$eventBus.$on("reNamekey",(data,oldKeyName)=>{
            if(data.redisClient!==this.redisClient){
                return false;
            }
            //修改名称
            let index;
            for(var i=0;i<this.keyList.length;i++){
                if(this.keyList[i]===oldKeyName){
                    index=i;
                    break;
                }
            }
            this.$set(this.keyList,index,data.key)
        })
    },
    methods:{
        //初始化
       init(){
           var name = this.redisClient.constructor.name
           if(name==='Cluster'){
               this.clusterRefreshRediskey();
           }else if(name==='Redis'){
               this.redisRefreshRediskey(this.redisClient);
           }else{
                this.$message.error(this.$t('aside.UnsupportedConnection'));
           }
       },
       //单机模式刷新key
       redisRefreshRediskey(node){
            let self=this;
            let stream = node.scanStream(this.options);
            self.stream=stream;
            self.loading=true;
            stream.on('data',function(keys){
                self.keyList=self.keyList.concat(keys)
                self.PausePoint+=keys.length
                //每满足200+以上则暂停
                if(self.PausePoint>=self.options.count){
                    stream.pause();
                    self.loading=false
                    self.PausePoint=0;
                }
            })
            //流数据获取结束
            stream.on('end',function(){
                self.loadDoNone=true
                self.stream=null
                self.loading=false
            })
       },
       //集群模式刷新key
       clusterRefreshRediskey(){
            let nodes=this.redisClient.nodes('master');
            nodes.map(node=>{
                this.redisRefreshRediskey(node);
            })
       },
       //搜索时刷新key
       search(value){
           this.keyList=[];
           this.options.match=value==='*'?value:`*${value}*`
           this.init();
       },
       //加载更多
       loadMore(){
           this.stream.resume();
       },
       //key点击事件
       keyClick(key){
           this.lastClickIndex=key
           //target:blank打开新的窗口
           //target:self在右边tabs选中的窗口进行替换
           const tabName=key+"┃DB"+this.$parent.$parent.$parent.$refs.menuOperating.currentChoseDbNo+"┃"+this.config.name
           this.$eventBus.$emit('addTab',{"key":key,"target":"self","redisClient":this.redisClient,"tabName":tabName,"type":"openKey"})
       },
       deleteKey(key){
           let newList=this.keyList.filter(item=>{
               return item!==key
           })
           this.keyList=newList
       },
       addKey(key){
           this.keyList.push(key)
       }
    },
    watch: {
        redisClient(newValue, oldValue) {
            //如果redisClient发生变化|重新初始化页面
           if(newValue&&oldValue===null){
               this.keyList=[];
               this.init();
           }
        }
    } 
}
</script>

<style scoped>
    .keyList{
        min-height: 50px;
    }
    .list{
        list-style: none;
    }
   .list li{
        font-size: 13.4px;
        padding: 6px 10px;
        cursor: pointer;
        border-radius: 5px;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border: 0.5px solid hsla(0,0%,100%,.5);
   }
   .list li:hover{
        color: #f2f6fc;
        background-color: #258bf5;
   }
   .lastClickIndex{
        color: #f2f6fc;
        background-color: #258bf5;
   }
   .noData{
        font-size: 12px;
        text-align: center;
        position: relative;
        top: 20px;
   }
   .loadMore button{
        width: 100%;
        padding: 5px 15px;
   }
</style>